@extends('admin.layout.app')
@section('title', '菜单管理')

@section('nav')
    @include('admin.layout.nav', ['title'=> ['系统管理','菜单管理']])
@endsection

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">菜单管理</h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="dd">
                        @component('admin.component.sidebar-item', ['sidebars' => $sidebars, 'count'=>1])

                        @endcomponent
                    </div>
                </div>
                <!-- /.box-body -->
                <div class="box-footer clearfix">

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="box box-success">
                <div class="box-header with-border">
                    <h3 class="box-title">新建菜单</h3>
                </div>
                <form action="/menus/add" method="post" id="add-form" autocomplete="off">
                    {{ csrf_field() }}
                    <div class="box-body">
                        <div class="form-group">
                            <label for="name">父级菜单：</label>
                            <select class="form-control parent-select" name="pid">
                                <option value="0">顶级菜单</option>
                                @component('admin.component.sidebar-option', ['sidebars' => $sidebars, 'count'=>1])

                                @endcomponent
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">菜单名：</label>
                            <input type="text" class="form-control" name="name" value="" placeholder="请输入">
                        </div>
                        <div class="form-group">
                            <label for="url">url：</label>
                            <input type="text" class="form-control" name="url" value=""  placeholder="请输入">
                        </div>
                        <div class="form-group">
                            <label for="sort">排序值：</label>
                            <input type="text" class="form-control" name="sort" value=""  placeholder="请输入">
                        </div>
                        <div class="form-group">
                            <label for="icon">icon：</label>
                            <div class="input-group iconpicker-container">
                                <span class="input-group-btn">
                                    <button class="btn btn-default icon-btn-my" data-icon="fa-circle-o" data-iconset="fontawesome" role="iconpicker"></button>
                                </span>
                                <input type="text" name="icon" id="icon" class="form-control icon iconpicker-element iconpicker-input" value="fa-circle-o">
                            </div>
                            <span class="help-block">
                                <i class="fa fa-info-circle"></i>&nbsp;For more icons please see <a href="http://fontawesome.io/icons/" target="_blank">http://fontawesome.io/icons/</a>
                            </span>
                        </div>
                        <div class="form-group">
                            <label for="assign-roles[]">角色：</label>
                            <select multiple="multiple" name="assign-roles[]" id="assign-roles" class="form-control select2" style="width: 100%;">
                                @foreach($roles as $role)
                                    <option value="{{$role->id}}">{{$role->display_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <div class="box-footer">
                        <input type="submit" class="btn btn-primary" value="提交">
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('style')
    <link rel="stylesheet" href="/lib/jquery.validation/1.14.0/validation.css">
    <link rel="stylesheet" href="/lib/nestable/nestable.css">
    <link rel="stylesheet" href="/AdminLTE-2.4.2/bower_components/select2/select2.min.css">
    <link rel="stylesheet" href="/AdminLTE-2.4.2/bower_components/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css">
    <style>

    </style>
@endsection

@section('js')
    <script type="text/javascript" src="/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="/lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="/lib/jquery.validation/1.14.0/messages_zh.js"></script>
    <script type="text/javascript" src="/lib/nestable/jquery.nestable.js"></script>
    <script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/select2/select2.full.min.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/bootstrap-iconpicker/js/bootstrap-iconpicker-iconset-all.min.js"></script>
    <script type="text/javascript" src="/AdminLTE-2.4.2/bower_components/bootstrap-iconpicker/js/bootstrap-iconpicker.min.js"></script>
    <script >
        $(function () {

            $('.parent-select').select2({
                allowClear: true,
                placeholder: "父级菜单"
            });
            $('#assign-roles').select2({
                allowClear: true,
                placeholder: "角色"
            });
            $('.icon-btn-my').iconpicker({placement:'bottomLeft'});

            $('.icon-btn-my').on('change', function(e) {
                $('.icon').val(e.icon);
                console.log(e.icon);
            });

            $('.dd').nestable({
                maxDepth:5,
                group: $(this).attr('id'),
                noDragClass:'dd-nodrag',
            });

            $('.delete-sidebar').click(function () {
                var id_ = $(this).attr('data-id');
                var confirm_index = layer.confirm("删除该菜单也会将其下子菜单一起删除，确认要删除吗？",{}, function () {
                    layer.close(confirm_index);
                    var load_index = layer.msg('正在处理中', {
                        icon: 16,
                        shade: 0.5,
                        time: 15000
                    });
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': "{{ csrf_token() }}"
                        }
                    });
                    $.post('/menus/delete', {id: id_}, function (res) {
                        if(res.code == 200){
                            layer.close(load_index);
                            layer.msg('操作成功！', {icon: 1});
                            window.location.reload();
                        }else{
                            layer.alert(res.message, {icon: 5});
                        }
                    });
                });
            });

            $("#add-form").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2
                    },
                    icon: {
                        required: true,
                    },
                    pid:{
                        required: true,
                    },
                    sort: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "请输入菜单名",
                        minlength: "至少由两个字母组成",
                    },
                    icon: {
                        required: "请选择",
                    },
                    pid: {
                        required: "请选择",
                    },
                    sort: {
                        required: "请输入",
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo(element.parent());
                }
            })
        })
    </script>
@endsection